<template>
    <span :class="[$style.container]">
        <svg-icon :icon="icon"></svg-icon>
    </span>
</template>

<script>
import { Vue, Component, Prop } from 'vue-property-decorator';
import { getIcon } from './config';

@Component
export default class DocNav extends Vue {
    @Prop() data;

    get name() {
        return this.data?.name || '';
    }

    get type() {
        return this.data?.type || 'file';
    }

    get isTeam() {
        return !!this.data?.teamDir;
    }

    get icon() {
        if (this.type === 'dir') {
            return this.isTeam ? 'team-dir' : 'docs';
        }
        const idx = (this.name || '').lastIndexOf('.');
        const suffix = idx > 0 ? this.name.slice(idx + 1) : '';
        return getIcon((suffix || '').toLowerCase());
    }
}
</script>

<style lang="scss" module>
@import '../../vars.scss';

.container {
    font-size: inherit;
}
</style>
